<script setup>
import MessageList from "@/components/messageBox/MessageList.vue"
import { ref } from "@vue/reactivity";
import { createMessage, getAllMessage } from "../Api"

    // 数据获取
    const list = ref([]);
    const getList = async () => {
        let res = await getAllMessage();
        list.value = res.data.list;
    }
    getList();

    // 创建留言
    const name = ref("");
    const content = ref("");
    const submitMessage = async () => {
        let data = {};
        data.Name = name.value;
        data.Content = content.value;
        name.value = "";
        content.value = "";
        data.Time = new Date().getTime();
        let res = await createMessage(data);
        getList();
    }

</script>
 
<template>
    <div class="container">
        <div class="message-container">
            <MessageList :list="list"></MessageList>
        </div>
        <div class="input-container">
            <textarea class="text" cols="30" rows="4" placeholder="请输入留言内容" v-model="content"></textarea>
            <div class="name-form">
                <label for="name-input" >名字:</label>
                <input id="name-input" type="text" v-model="name">
            </div>
            <button @click="submitMessage">提交</button>
        </div>
    </div>
</template>

<style lang='less' scoped>
    .container {
        padding: 20px 80px;
        .message-container {
            margin: 0 auto;
            background: rgba(255,255,255,.5);
            width: 800px;
            min-height: 600px;
        }
        .input-container {
            position: relative;
            margin: 0 auto;
            padding-top: 20px;
            background: rgba(255,255,255,.5);
            width: 800px;
            height: 240px;
            .text {
                display: block;
                margin: 0 auto;
                width: 500px;
                resize: none;
                outline: none;
                border: 1px solid rgba(0, 0, 0, .3);
                padding: 10px;
                border-radius: 5px;
                font-size: 18px;
                font-family: "kaiti";
            }
            .name-form {
                width: 500px;
                margin: 0 auto;
                margin-top: 10px;
                label {
                    font-family: 'kaiti';
                }
                input {
                    outline: none;
                    border: 1px solid rgba(0, 0, 0, .3);
                }
            }
            button {
                cursor: pointer;
                position: absolute;
                border: none;
                border-radius: 5px;
                width: 60px;
                height: 30px;
                background-color: #5db8f5;
                margin-top: 10px;
                right: 19%;
                &:hover {
                    background-color: #49a4e1;
                }
            }
        }
    }
</style>